<!--

  内容区人力资源
  
-->

<template>
    <div class="contain" >
        
        <el-row class="el-b">
                    <el-button type="primary"
                    plain class="aa"
                   >员工档案</el-button>
                   <el-button type="success" plain>员工排班</el-button>
                   <el-button type="info" plain>门卫登记</el-button>
                   <el-button type="warning" plain>车辆登记</el-button>
                   <el-button type="danger" plain>移动考勤</el-button>
        </el-row>

        <!-- css3立体区域 -->

<!-- <Arrow name="人力资源" distance="26%"  @handleClick='eee'></Arrow>
<Arrow name="出差登记" distance="36%" @handleClick='aaa'></Arrow>
<Arrow name="调休补班" distance="46%"  @handleClick='eee'></Arrow>
<Arrow name="考勤管理" distance="56%" @handleClick='aaa'></Arrow> -->
<div class="tu">
    <Fontsize title="请假登记" km="37%" />
    <Fontsize title="出差登记" distance="33.5%" km="37%"/>
    <Fontsize title="调休补班" distance="53%" km="37%"/>
    <Fontsize title="考勤管理" distance="71.5%" km="37%"/>
 
            <img   class="w1" src="../../assets/green/four-black.png" />
              <img   class="w1 w2" src="../../assets/green/four-green.png" />
                <img   class="w1 w3" src="../../assets/green/four-black.png" />
                  <img   class="w1 w4" src="../../assets/green/four-green.png" />
</div>

      <div class="biaoti-1">
            <p>Dummy&nbsp;Title&nbsp;&nbsp;1</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;1</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;1</p>
       </div>
<div class="biaoti-2">
            <p>Dummy&nbsp;Title&nbsp;&nbsp;2</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;2</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;2</p>
       </div>
       <div class="biaoti-3">
            <p>Dummy&nbsp;Title&nbsp;&nbsp;3</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;3</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;3</p>
       </div>
       <div class="biaoti-4">
            <p>Dummy&nbsp;Title&nbsp;&nbsp;4</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;4</p>
            <p>Dummy&nbsp;Title&nbsp;&nbsp;4</p>
       </div>
     
    </div>
    
</template>

<script>
import Arrow from '../Arrow'
import Fontsize from '../Fontsize'
export default {
//    data(){
//        return{
//            aa:true
//        }
//    },

    methods:{
        eee(){
            alert('ee')
        },
        aaa(){
            alert('aa')
        },
        // cc(){
        //     if(this.$route.params.id==='bb'){
        //         aa:false
        //     }else{
        //         aa:true
        //     }
        // }
    
    },
    components:{
        Arrow,
        Fontsize
    }
}
</script>

<style lang="scss" scoped>

    .contain{
        height: 100%;
    }
    .aa{
        margin-left:60px
    }
  .el-button{
        margin-top: 20px;
        color: #b0b0b0;
        background: #5a5a5a;
        border-color: #5a5a5a;
        transition: 1.1s;
   }
.tu{
    position: relative;
    height: 88%;
    width:72%;
    }
.w1{
    position: absolute;
    top: 29%;
    left: 12%;
    height: 25.216%;

    width: 14.064%;
    z-index: 222;
    cursor: pointer;
    }
    .w2{
        left: 31%;
    }
     .w3{
        left: 50%;
    }
     .w4{
        left: 69%;
    }
.biaoti-1{
    position: absolute;
    top: 52%;
    left:23%;
    font-size: 16px;
    margin: 5px;
    line-height:30px;
    color: #828083;
    
}
.biaoti-2{
    position: absolute;
    top: 52%;
    left:34.5%;
    font-size: 15px;
    margin: 5px;
    line-height:30px;
    color: #828083;
}
.biaoti-3{
    position: absolute;
    top: 52%;
    left:46%;
    font-size: 15px;
    margin: 5px;
    line-height:30px;
    color: #828083;
}
.biaoti-4{
    position: absolute;
    top: 52%;
    left:57.5%;
    font-size: 15px;
    margin: 5px;
    line-height:30px;
    color: #828083;
}
  @media screen and (max-width:1232px){
p{font-size: 13px !important;}
}
</style>
